<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一天作业</title>

    <script src="../tool/vue.js"></script>
    <style>
        #in1 {
            width: 200px;
            height: 30px;
        }

        button {
            height: 33px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>作业1：输入框和密码的切换（v-bind指令、v-on指令）</h3>
        <button v-on:click="change1">{{work1}}：</button><input type="text" id="in1" />

        <h3>作业2：遍历checkbox，实现全选（v-for指令、v-model指令、v-on指令）</h3>
        <button v-on:click="change2">全选</button><br>
        <form v-for="(item, index) in list" :key="index">
            <input type="checkbox" name="vehicle" :value="item" v-model="checkboxdata">{{item}}<br>
        </form><br>
        已选择：{{checkboxdata}}


    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                work1: "点击我变成密码框",
                list: ["java", "python", "C++", "C语言"],
                checkboxdata: [],
                blog: true

            },
            methods: {
                change1: function () {
                    if (document.getElementById('in1').type === "password") {
                        document.getElementById('in1').type = "text";
                        this.work1 = "点击我变成密码框";
                    } else {
                        document.getElementById('in1').type = "password";
                        this.work1 = "点击我变成文本框";
                    }

                },
                change2: function () {
                    // 全选
                    if (this.blog) {
                        var a = document.getElementsByTagName("input");
                        for (var i = 0; i < a.length; i++)
                            if (a[i].type == "checkbox") a[i].checked = !a[i].checked;
                        this.checkboxdata = this.list;
                        this.blog = false;
                    } else {
                        var a = document.getElementsByTagName("input");
                        for (var i = 0; i < a.length; i++)
                            if (a[i].type == "checkbox") a[i].checked = !a[i].checked;
                        this.checkboxdata = [];
                        this.blog = true;
                    }

                }
            }
        })

    </script>
</body>

</html>